<template>
  <li class="item" :class="{ active: todo.complated }">
    <input
      type="checkbox"
      :checked="todo.complated"
      @change="
        $emit('toggle', { id: todo.id, complated: $event.target.checked })
      "
    />
    <p v-if="!editing">
      <span @dblclick="editing = true">{{ todo.text }}</span>
      <i @click="$emit('delete', todo.id)">X</i>
    </p>
    <input
      v-else
      type="text"
      @keyup.esc="editing = false"
      :value="todo.text"
      @keyup.enter="
        $emit('updata-todo', { id: todo.id, text: $event.target.value });
        editing = false;
      "
    />
  </li>
</template>

<script>
export default {
  props: ["todo"],
  data: function () {
    return {
      editing: false,
    };
  },
};
</script>

<style lang="less" scoped>
.item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 10px 0;
  p {
    flex: 1;
    display: flex;
    margin: 0;
    span {
      flex: 1;
    }
  }
  input[type="text"] {
    width: 100%;
  }
  &.active {
    p {
      span {
        text-decoration: line-through;
      }
    }
  }
}
</style>